<template>
	<div class="h100">
		<div v-if="itemForm" class="h100">
			<div class="title-box">
				<span>
					任务详情
				</span>
				<div v-if="itemForm">
					<el-button type="danger" icon="el-icon-close" circle @click="close" />
				</div>
			</div>
			<div class="center-box flex-c flex-sb">
				<el-descriptions title="基础信息" :column="4" border size="medium">
					<el-descriptions-item label="节点类型">{{form.nodeStatus}}</el-descriptions-item>
					<el-descriptions-item label="节点名称">{{form.nodeName}}</el-descriptions-item>
					<el-descriptions-item label="节点描述">{{form.nodeRemark}}</el-descriptions-item>
					<el-descriptions-item label="节点天数">{{form.nodeDay}}</el-descriptions-item>
					<el-descriptions-item label="开始时间">{{form.startTime}}</el-descriptions-item>
					<el-descriptions-item label="结束时间">{{form.endTime}}</el-descriptions-item>
					<el-descriptions-item label="备注">{{form.remark}}</el-descriptions-item>
				</el-descriptions>
				<el-divider />
				<div style="display: flex; flex-direction: row;justify-content: space-between;flex: 1;">
					<div style="width: 100%;" class="h100">
						<div class="title-box">
							<span>
								填报要求
							</span>
							<div>
								<el-button type="success" icon="el-icon-view" @click="openMylog"
									size="mini">评分项</el-button>
							</div>
						</div>
						<div class="center-box">
							<el-table ref="table" v-loading="yaoqiuLoading" :data="yaoqiuList">
								<el-table-column label="填报名称" align="center" prop="nodeName" width="200" show-overflow-tooltip></el-table-column>
								<el-table-column label="填报描述" align="center" prop="nodeRemark" show-overflow-tooltip></el-table-column>
								<el-table-column label="操作" align="center" width="300">
									<template slot-scope="scope">
										<el-button size="mini" type="primary" v-hasPermi="['lanjing:template:edit']"
											icon="el-icon-view" @click="yaoqiuFun('detail',scope.row,scope.$index)"
											v-if="!btnShow">详情</el-button>
											<el-button size="mini" type="success" v-hasPermi="['lanjing:template:edit']"
												icon="el-icon-edit" @click="yaoqiuFun('tianbao',scope.row,scope.$index)"
												v-if="!btnShow">填报</el-button>
											<!-- <el-button size="mini" type="warning" v-hasPermi="['lanjing:template:edit']"
												icon="el-icon-chat-line-square" @click="yaoqiuFun('shenpi',scope.row,scope.$index)"
												v-if="!btnShow">审批</el-button> -->
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>

				</div>
			</div>
		</div>
		<el-empty class="h100" v-else description="任务详情" />

		<renwu ref="renwu" @ok="(row)=>{yaoqiuFun('ok',row)}"></renwu>
		<pingfen ref="pingfen" @ok="(row)=>{pingfenFun('ok',row)}"></pingfen>

		<mylog ref="mylog" @ok="updataParentId" @close="cancel">
			<template #center>
				<el-table ref="table" v-loading="pingfenLoading" :data="pingfenList">
					<el-table-column label="评分项名称" align="center" prop="pfName" />
					<el-table-column label="占分标准(每次)" align="center" prop="pfNumber" />
					<el-table-column label="减分标准(每次)" align="center" prop="pfJianNumber" />
					<!-- <el-table-column label="评估责任单位" align="center" prop="pfDept" />
							<el-table-column label="评分描述" align="center" prop="remark" /> -->
					<el-table-column label="操作" align="center" width="120">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" v-hasPermi="['lanjing:template:edit']"
								:icon="scope.row.edit?'el-icon-check':'el-icon-edit'"
								@click="pingfenFun('edit',scope.row,scope.$index)" v-if="btnShow"></el-button>
							<el-button size="mini" type="danger" v-hasPermi="['lanjing:template:edit']"
								icon="el-icon-delete" @click="pingfenFun('remove',scope.row,scope.$index)"
								v-if="btnShow"></el-button>
							<el-button size="mini" type="primary" v-hasPermi="['lanjing:template:edit']"
								icon="el-icon-view" @click="pingfenFun('detail',scope.row,scope.$index)"
								v-if="!btnShow"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</mylog>
		<mylog ref="tianbaoLog" @ok="updataParentId" @close="cancel">
			<template #center>
				<notice ref="notice"></notice>
			</template>
		</mylog>
		<mylog ref="shenpiLog" @ok="updataParentId" @close="cancel">
			<template #center>
				<comment ref="comment"></comment>
			</template>
		</mylog>
	</div>
</template>

<script>
	import {
		getAction,
		postAction,
		editAction,
		removeAction,
		detailAction,
	} from "@/api/api";
	import mylog from '@/views/components/mylog.vue'
	import myDrawer from '@/views/components/myDrawer.vue'
	import renwu from '@/views/lanjing/template/renwu.vue';
	import pingfen from '@/views/lanjing/template/pingfenxiang.vue';
	import dayjs from "dayjs";
	import notice from './notice.vue';
	import comment from './comment.vue';
	export default {
		dicts: [],
		components: {
			mylog,
			myDrawer,
			renwu,
			pingfen,
			notice,
			comment
		},
		name: "formItem",
		props: {
			btnShow: {
				default: true,
			}
		},
		watch: {
			btnShow(a) {
				this.btnShow = a
			}
		},
		data() {
			return {
				spanNumber: 6,
				form: {},
				rules: {
					nodeName: [{
						required: true,
						message: '请输入节点名称',
						trigger: 'blur'
					}],
					nodeRemark: [{
						required: true,
						message: '请输入节点描述',
						trigger: 'blur'
					}],
					nodeDay: [{
						required: true,
						message: '请输入节点天数',
						trigger: 'blur'
					}],
					nodeNumber: [{
						required: true,
						message: '请输入节点分数',
						trigger: 'blur'
					}],
					remark: [{
						required: true,
						message: '请输入节点备注',
						trigger: 'blur'
					}],
					nodeQianzhi: [{
						required: true,
						message: '请选择前置节点',
						trigger: 'charge'
					}],
					startTime: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'charge'
					}],
				},
				loading: false,
				itemForm: null,
				pingfenList: [],
				pingfenLoading: false,
				pingfenDis: false,
				yaoqiuList: [],
				yaoqiuLoading: false,
				yaoqiuDis: false,
				qianzhi: [],
				modelTime: null,
				modelList: [],
				tbItem:{},

			};
		},
		created() {},
		methods: {
			openMylog() {
				this.$refs.mylog.open = true;
				this.$refs.mylog.title = '评分项';
				this.$refs.mylog.showBtn = false

			},
			show(row = null) {
				console.log('formItem', row)
				if (row) {
					this.itemForm = {
						...row
					}
					this.form = {
						...row
					}
					this.pingfenList = row.pingfenList
					this.yaoqiuList = row.yaoqiuList
				} else {
					let id = new Date().getTime()
					this.itemForm = {
						id,
						ids: [id]
					}
					this.pingfenList = []
					this.yaoqiuList = []
				}
			},
			ok() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						let obj = {
							...this.itemForm,
							...this.form,
							pingfenList: this.pingfenList,
							yaoqiuList: this.yaoqiuList
						}
						this.$emit('ok', obj)
					}
				});
			},
			close() {
				this.itemForm = null;
				this.pingfenList = [];
				this.$emit('close')
			},
			yaoqiuFun(type, row, index) {
				console.log(type, row)
				
				if (type == 'detail') {
					this.$refs.renwu.$refs.mylog.open = true;
					this.$refs.renwu.$refs.mylog.title = '查看任务';
					if (!this.btnShow) {
						this.$refs.renwu.$refs.mylog.showBtn = false;
						this.$refs.renwu.showBtn = true;
					}
					this.$refs.renwu.form = {
						...row,
						index: index
					}
				}
				if (type == 'tianbao') {
					this.$refs.tianbaoLog.open = true;
					this.$refs.tianbaoLog.title = '填报内容';
					this.tbItem = {...row}
					
				}
				if (type == 'shenpi') {
					this.$refs.shenpiLog.open = true;
					this.$refs.shenpiLog.title = '审批内容';
					this.tbItem = {...row}
					
				}
				
			},
			pingfenFun(type, row, index) {
				console.log(type, row)
				if (type == 'ok') {
					if (row.edit == undefined) {
						let obj = {
							...row
						}
						obj.edit = false;
						this.pingfenList.push(obj)
					} else {
						this.$set(this.pingfenList, row.index, {
							...row
						})
					}
					return
				}
				if (type == 'add') {
					this.$refs.pingfen.$refs.mylog.open = true;
					this.$refs.pingfen.$refs.mylog.title = '添加评分项';
				}
				if (type == 'edit') {
					this.$refs.pingfen.$refs.mylog.open = true;
					this.$refs.pingfen.$refs.mylog.title = '编辑评分项';
					this.$refs.pingfen.form = {
						...row,
						index: index
					}
				}
				if (type == 'detail') {
					this.$refs.pingfen.$refs.mylog.open = true;
					this.$refs.pingfen.$refs.mylog.title = '查看评分项';

					if (!this.btnShow) {
						this.$refs.pingfen.$refs.mylog.showBtn = false;
						this.$refs.pingfen.showBtn = true;
					}
					this.$refs.pingfen.form = {
						...row,
						index: index
					}
				}
				if (type == 'remove') {
					this.$confirm('此操作将永久删除该评分项, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.pingfenList.splice(index, 1)
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					})
				}
			},
			setStartTime() {
				let endTime = dayjs(this.form.startTime, "YYYY-MM-DD").add(this.form.nodeDay, 'day').format("YYYY-MM-DD")
				this.$set(this.form, 'endTime', endTime)
			},
			setDay() {
				if (this.modelTime) {
					if (this.form.nodeQianzhi.length > 0 && this.form.nodeDay) {
						let startTime = null,
							endTime = null,
							obj = {};
						console.log(this.form.nodeQianzhi)
						if (this.form.nodeQianzhi[this.form.nodeQianzhi.length - 1] == 'root') {
							startTime = this.modelTime
						} else {
							obj = this.modelList.find(v => v.id == this.form.nodeQianzhi[this.form.nodeQianzhi.length - 1])
							startTime = dayjs(obj.endTime, "YYYY-MM-DD").add(1, 'day').format("YYYY-MM-DD")
						}
						endTime = dayjs(startTime, "YYYY-MM-DD").add(this.form.nodeDay, 'day').format("YYYY-MM-DD")
						this.$set(this.form, 'startTime', startTime)
						this.$set(this.form, 'endTime', endTime)
					}
				}
			},
			setModelData(modelTime, modelList) {
				this.modelTime = modelTime
				this.modelList = modelList
			},
			updataParentId(){
				this.$refs.tianbaoLog.open = false;
				this.$refs.shenpiLog.open = false;
			}
		}
	};
</script>
<style scoped lang="scss">
	.title-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30px;

		>span {
			font-weight: 500;
			font-size: 18px;
			line-height: 30px;
		}

	}

	.center-box {
		overflow-x: hidden;
		height: calc(100% - 60px);
	}
</style>